<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :sm="24" :md="24" :xxl="16">
            <a-form-item label="区域">
              <a-row :gutter="5" type="flex">
                <a-col :span="3">
                  <a-select
                    placeholder="省"
                    v-model="queryParam.provinceCode"
                    @change="e => addressChange(e, 'cityOptions', 'province')"
                  >
                    <a-select-option v-for="item in provinceOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select
                    placeholder="市"
                    v-model="queryParam.cityCode"
                    @change="e => addressChange(e, 'areaOptions', 'city')"
                  >
                    <a-select-option v-for="item in cityOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select
                    placeholder="区"
                    v-model="queryParam.areaCode"
                    @change="e => addressChange(e, 'streetOptions', 'area')"
                  >
                    <a-select-option v-for="item in areaOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="3">
                  <a-select
                    placeholder="街道"
                    v-model="queryParam.streetCode"
                    @change="e => addressChange(e, '', 'street')"
                  >
                    <a-select-option v-for="item in streetOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-select
                    placeholder="商家"
                    v-model="queryParam.businessId"
                    @change="e => agentChange(e, 'networkOptions', 'agentCode')"
                  >
                    <a-select-option v-for="item in agentOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-select
                    placeholder="网点"
                    v-model="queryParam.networkId"
                    @change="e => agentChange(e, 'deviceOptions', 'networkCode')"
                  >
                    <a-select-option v-for="item in networkOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-select placeholder="设备" v-model="queryParam.deviceId">
                    <a-select-option v-for="item in deviceOptions" :key="item.name" :value="item.code">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8">
            <a-form-item label="用户手机">
              <a-input placeholder="请输入" v-model="queryParam.mobileNum"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="主板ID">
                <a-input placeholder="请输入" v-model="queryParam.mainboardId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="支付订单号">
                <a-input placeholder="请输入" v-model="queryParam.businessOrderId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8" v-if="!isBusiness">
              <a-form-item label="柜子别名">
                <a-input placeholder="请输入" v-model="queryParam.cellOtherName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="订单ID">
                <a-input placeholder="请输入" v-model="queryParam.orderId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="微信昵称">
                <a-input placeholder="请输入" v-model="queryParam.wechatName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="订单状态">
                <j-dict-select-tag
                  allowClear
                  noSelect
                  v-model="queryParam.orderStatus"
                  placeholder="请选择"
                  dictCode="orderStatus"
                />
              </a-form-item>
            </a-col>
            <!-- <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="逻辑标记">
                <a-select placeholder="请选择">

                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="订单来源">
                <j-dict-select-tag
                  allowClear
                  noSelect
                  v-model="queryParam.orderOrigin"
                  placeholder="请选择"
                  dictCode="orderOrigin"
                />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="计费方式">
                <j-dict-select-tag
                  allowClear
                  v-model="queryParam.chargeType"
                  placeholder="请选择"
                  dictCode="billingMethod"
                />
              </a-form-item>
            </a-col>
            <a-col :sm="24" :md="12" :xl="8">
              <a-form-item label="下单时间">
                <a-range-picker allowClear class="per100" v-model="tempTimes" @change="timeChange" />
              </a-form-item>
            </a-col>
          </template>

          <a-col :sm="24" :md="12" :xl="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator mt10">
      <a-button type="primary" icon="download" @click="handleExportXls('在线订单')">导出</a-button>
    </div>

    <!-- table区域 -->
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :scroll="{ x: 1200 }"
      @change="specialHandleTableChange"
    >
      <span slot="orderOrigin" slot-scope="text, record">
        <a-tag color="#1890FF" v-if="text === '0'">
          {{ filterDictText(orderOriginOptions, text) }}
        </a-tag>
        <a-tag color="#04de6d" v-else-if="text === '1'">
          {{ filterDictText(orderOriginOptions, text) }}
        </a-tag>
        <a-tag color="#000" v-else-if="text === '3'">
          {{ filterDictText(orderOriginOptions, text) }}
        </a-tag>
        <a-tag color="#722ed1" v-else-if="text === '2'">
          {{ filterDictText(orderOriginOptions, text) }}
        </a-tag>
        <a-tag v-else>
          {{ filterDictText(orderOriginOptions, text) }}
        </a-tag>
      </span>
      <template slot="orderStatusSlot" slot-scope="text, record">
        <a-tag color="green" v-if="text === 0 || text === 1">{{ filterDictText(orderStatusOptions, text) }}</a-tag>
        <a-tag color="cyan" v-else-if="text === 2">{{ filterDictText(orderStatusOptions, text) }}</a-tag>
        <a-tag v-else-if="text === 3">{{ filterDictText(orderStatusOptions, text) }}</a-tag>
        <a-tag color="purple" v-else-if="text === 4">{{ filterDictText(orderStatusOptions, text) }}</a-tag>
        <a-tag color="red" v-else-if="text === 5 || text === 7">{{ filterDictText(orderStatusOptions, text) }}</a-tag>
        <a-tag color="blue" v-else-if="text === 6">{{ filterDictText(orderStatusOptions, text) }}</a-tag>
        <a-tag v-else>{{ filterDictText(orderStatusOptions, text) }}</a-tag>
      </template>
      <span slot="deposit" slot-scope="text, record">
        {{ formatAmountFromFenToYuan(record.deposit) }}
      </span>
      <span slot="actualAmount" slot-scope="text, record">
        {{ formatAmountFromFenToYuan(record.actualAmount) }}
      </span>
      <span slot="refundDeposit" slot-scope="text, record">
        {{ formatAmountFromFenToYuan(record.refundDeposit) }}
      </span>
      <span slot="action" slot-scope="text, record">
        <span v-has="'order:openLock'">
          <a-button
            style="padding: 0"
            type="link"
            :disabled="buttonDisabled(record.orderStatus)"
            @click="cellOpen(record)"
          >
            开锁
          </a-button>
          <a-divider type="vertical" />
        </span>
        <span v-has="'order:status'">
          <a-button
            style="padding: 0"
            type="link"
            :disabled="buttonDisabled(record.orderStatus)"
            @click="refreshCell(record)"
          >
            状态</a-button
          >
          <a-divider type="vertical" />
        </span>
        <span v-has="'order:details'" v-if="record.chargeType !== '0' && record.actualAmount > 0">
          <a @click="orderSharing(record.orderId)">分成详情</a>
          <a-divider type="vertical" />
        </span>
        <a-button
          style="padding: 0"
          type="link"
          :disabled="disableRefund(record)"
          v-has="'order:refund'"
          @click="wechatUserRefund(record.orderId, 1)"
          >押金退款</a-button
        >
      </span>
    </a-table>
    <order-sharing ref="orderSharing"></order-sharing>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@/api/manage'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
import Api from '@/api/OrderManage/OnlineOrders'
import DeviceListApi from '@/api/DeviceManage/DeviceList'
import { formatAmountFromFenToYuan } from '@/utils/util'
import OrderSharing from '@views/OrderManage/OrderSharing'
import { RefundMixin } from '@/mixins/Refund'
import store from '@/store/'
import { RoleMixin } from '@/mixins/roleUtil'

export default {
  name: 'OnlineOrders',
  mixins: [JeecgListMixin, RefundMixin, RoleMixin],
  components: { OrderSharing },
  data() {
    return {
      url: {
        list: Api.list,
        exportXlsUrl: '/business/order/exportXls'
      },
      filterDictText,
      formatAmountFromFenToYuan,
      columns: [],
      userYnOptions: [],
      orderStatusOptions: [],
      orderOriginOptions: [],
      billingMethodOptions: [],
      hiddenOptions: []
    }
  },
  created() {
    this.columns = [
      {
        title: '订单ID',
        dataIndex: 'orderId',
        width: 100,
        align: 'center',
        fixed: 'left',
        sorter: (a, b) => {
          return a.orderId - b.orderId
        }
      },
      {
        title: '商家',
        dataIndex: 'businessName',
        align: 'center',
        width: 100
      },
      {
        title: '网点名称',
        dataIndex: 'networkName',
        align: 'center',
        width: 100,
        sorter: (a, b) => {
          return a.networkName - b.networkName
        }
      },
      {
        title: '主板ID',
        dataIndex: 'mainboardId',
        align: 'center',
        width: 100,
        sorter: (a, b) => {
          return a.mainboardId - b.mainboardId
        }
      },
      {
        title: '柜子编号',
        dataIndex: 'cellName',
        align: 'center',
        width: 100
      },
      {
        title: '用户/微信昵称',
        dataIndex: 'wechatName',
        align: 'center',
        width: 110,
        sorter: (a, b) => {
          return a.wechatName - b.wechatName
        }
      },
      {
        title: '订单来源',
        dataIndex: 'orderOrigin',
        width: 100,
        align: 'center',
        scopedSlots: { customRender: 'orderOrigin' },
        sorter: (a, b) => {
          return a.orderOrigin - b.orderOrigin
        }
      },
      {
        title: '计费方式',
        dataIndex: 'chargeType',
        width: 100,
        align: 'center',
        customRender: (text, record, index) => {
          //字典值替换通用方法
          return filterDictText(this.billingMethodOptions, text)
        },
        sorter: (a, b) => {
          return a.chargeType - b.chargeType
        }
      },
      {
        title: '存包手机',
        dataIndex: 'storageMobile',
        align: 'center',
        width: 110,
        sorter: (a, b) => {
          return a.storageMobile - b.storageMobile
        }
      },
      {
        title: '存包密码',
        dataIndex: 'storagePwd',
        align: 'center',
        width: 100,
        sorter: (a, b) => {
          return a.storagePwd - b.storagePwd
        }
      },
      {
        title: '订单金额',
        dataIndex: 'orderAmount',
        align: 'center',
        width: 100,
        customRender: (text, record, index) => {
          return formatAmountFromFenToYuan(text)
        },
        sorter: (a, b) => {
          return a.orderAmount - b.orderAmount
        }
      },
      {
        title: '实际金额',
        dataIndex: 'actualAmount',
        align: 'center',
        sorter: (a, b) => {
          return a.actualAmount - b.actualAmount
        },
        scopedSlots: { customRender: 'actualAmount' },
        width: 100
      },
      {
        title: '退款金额',
        dataIndex: 'refundAmount',
        align: 'center',
        sorter: (a, b) => {
          return a.refundAmount - b.refundAmount
        },
        customRender: (text, record, index) => {
          return formatAmountFromFenToYuan(text)
        },
        width: 100
      },
      {
        title: '押金',
        dataIndex: 'deposit',
        align: 'center',
        sorter: (a, b) => {
          return a.advertisingScreen - b.advertisingScreen
        },
        scopedSlots: { customRender: 'deposit' },
        width: 100
      },
      {
        title: '已退款押金',
        dataIndex: 'refundDeposit',
        sorter: (a, b) => {
          return a.advertisingScreen - b.advertisingScreen
        },
        scopedSlots: { customRender: 'refundDeposit' },
        align: 'center',
        width: 120
      },
      {
        title: '开始时间',
        dataIndex: 'createTime',
        align: 'center',
        width: 100,
        sorter: (a, b) => {
          return a.createTime - b.createTime
        }
      },
      {
        title: '结束时间',
        dataIndex: 'endTime',
        align: 'center',
        width: 100,
        sorter: (a, b) => {
          return a.endTime - b.endTime
        }
      },
      {
        title: '是否隐藏',
        dataIndex: 'display',
        width: 100,
        align: 'center',
        customRender: (text, record, index) => {
          return filterDictText(this.hiddenOptions, text)
        },
        sorter: (a, b) => {
          return a.display - b.display
        },
        hide: this.isBusiness
      },
      {
        title: '支付订单号',
        dataIndex: 'businessOrderId',
        width: 130,
        align: 'center'
      },

      {
        title: '订单状态',
        dataIndex: 'orderStatus',
        scopedSlots: { customRender: 'orderStatusSlot' },
        fixed: 'right',
        align: 'center',
        width: 100,
        sorter: (a, b) => {
          return a.orderStatus - b.orderStatus
        }
      },
      {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 300,
        scopedSlots: { customRender: 'action' }
      }
    ].filter(item => !item.hide)

    this.getAddress('provinceOptions')
  },
  computed: {
    buttonDisabled() {
      return value => {
        return value !== 2 && value !== 6
      }
    },
    disableRefund() {
      return value => {
        return value.deposit === 0 || value.refundDeposit > 0
      }
    }
  },
  methods: {
    // 初始化数据字典
    initDictConfig() {
      //初始化字典 - 是否
      initDictOptions('userYn').then(res => {
        if (res.success) {
          this.userYnOptions = res.result
        }
      })
      //初始化字典 - 订单状态
      initDictOptions('orderStatus').then(res => {
        if (res.success) {
          this.orderStatusOptions = res.result
        }
      })

      initDictOptions('orderOrigin').then(res => {
        if (res.success) {
          this.orderOriginOptions = res.result
        }
      })

      initDictOptions('billingMethod').then(res => {
        if (res.success) {
          this.billingMethodOptions = res.result
        }
      })

      initDictOptions('hidden').then(res => {
        if (res.success) {
          this.hiddenOptions = res.result
        }
      })
    },

    searchQuery() {
      this.loadData(1, { newEndTime: this.queryParam.endTime, endTime: '' })
    },

    orderSharing(id) {
      this.$refs.orderSharing.showModal(id)
    },

    specialHandleTableChange(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData(undefined, { newEndTime: this.queryParam.endTime, endTime: '' })
    },

    // 刷新格子
    refreshCell(record) {
      console.log(record, 'record')
      const data = {
        id: record.cabinetId
      }
      getAction(DeviceListApi.refreshCell, data).then(res => {
        this.$message.success(res.message)
        //后端实体有endTime字段，所以需要用额外字段来查询
        this.loadData({ newEndTime: this.queryParam.endTime, endTime: '' })
      })
    },

    // 开柜
    cellOpen(record) {
      let data = []
      if (record === 'all') {
        if (!this.selectedRowKeys.length) {
          this.$message.error('请选择一个格子')
          return
        } else {
          data = this.selectedRowKeys
        }
      } else {
        data.push(record.cabinetId)
      }

      postAction(DeviceListApi.cellOpen, data).then(res => {
        this.$message.success(res.message)
        this.loadData({ newEndTime: this.queryParam.endTime, endTime: '' })
      })
    },

    // 创建时间改变
    timeChange(e, arr) {
      if (arr[0]) {
        this.queryParam.startTime = arr[0]
        this.queryParam.endTime = arr[1]
      } else {
        this.queryParam.startTime = undefined
        this.queryParam.endTime = undefined
      }
    }
  }
}
</script>

<style scoped></style>

